<div id="viewer-container"></div>
<div id="back" style="position: absolute;top: 0px;left: 0px; width: 100%;height: 100%;background: coral;z-index: 99999;
            display: flex;justify-content: center;align-items: center">
  <div id="text" style="text-shadow: 5px 5px 5px black;font-size: 100px;color: rgba(5,24,38)">00%</div>
</div>
<div class="label-info">
  <div class="btn" onclick="shadow(true)">开启模型阴影</div>
  <div class="btn" onclick="shadow(false)">关闭模型阴影</div>
</div>
<script>
  let dom = document.getElementById('text')
  let viewer
  let model

  function shadow(open) {
    if (open) {
      model.openCastShadow()
      model.openReceiveShadow()
    } else model.closeShadow()
  }

  CTS.ready(() => {
    viewer = new CTS.Viewer('viewer-container') //初始化场景
    viewer.camera.position.set(13, 13, 13) //设置相机位置
    new CTS.ModelLoder(viewer).loadModelToScene('resources/model/building.glb', _model => {
      model = _model
    }, press => {
      console.log(press)
      if (press == 100) document.getElementById('back').style.display = 'none'
      dom.innerText = press + '%'
    })
  })
</script>
